<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 计算属性
// 计算只写函数的写法，是只读的，可以取值，但是不能赋值
// const fullName = computed(() => {
//   return firstName.value + '---' + lastName.value
// })

// 完整的写法， 取值+赋值
const fullName = computed({
  // get 取值的会执行的逻辑
  get() {
    console.log('get执行啦~')
    return firstName.value + '|' + lastName.value
  },
  // 赋值会执行的逻辑
  // value 传入的值
  set(value) {
    console.log(value)
    // 接收到 value 自己写处理的逻辑

    // 比如 把 hey-bro 拆开
    // ['hey','bro']
    const arr = value.split('-')

    // hey 去 firstName
    firstName.value = arr[0]
    // bro 去 lastName
    lastName.value = arr[1]
  }
})
</script>

<template>
  <h2>{{ fullName }}</h2>
  <button @click="fullName = 'hey-bro'">修改fullName(计算属性)</button>
  <button @click="firstName += '!'">修改 firstName</button>
  <button @click="lastName += '!'">修改 lastName</button>
</template>

<style></style>
